<template>
  <div class="transition-done" v-show="ShowContent">
    <div class="form-checkbox">
      <input type="checkbox" />
      <label class="form-label">
        <span class="indicator" @click="changeStyle" id="indicator"> </span>
        保存我的位置信息以便日后使用
      </label>
    </div>
    <div class="selector">
      <div class="selector-tabs">
        <ul class="selector-tablist">
          <li>
            <button
              class="selector-tab"
              id="selector-tab"
              @click="townChange('one')"
            >
              {{ buttonValue }}
            </button>
          </li>
          <li v-show="townHidden">
            <button
              class="selector-tabTwo"
              id="selector-tabTwo"
              @click="townChange('two')"
            >
              {{ town }}
            </button>
          </li>
          <li v-show="countryTowHidden">
            <button
              class="selector-tabThrid"
              @click="townChange('three')"
              id="selector-tabThrid"
            >
              {{ countryTow }}
            </button>
          </li>
        </ul>
        <div data-core-tabs-panels class="selector-tab-panels">
          <div
            data-core-fade-transition-wrapper
            class="appear-done"
            id="appear-done"
            v-show="cityHidden"
          >
            <HiddenCity />
          </div>
          <div
            data-core-fade-transition-wrapperTwo
            class="appear-Second"
            id="appear-Second"
            v-show="HiddencountryTow"
          >
            <HiddenTown />
          </div>
          <div
            data-core-fade-transition-wrapper
            class="appear-Three"
            id="appear-Three"
            v-show="Hiddencountryarea"
          >
            <Hiddenarea />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../../../../../../../bus";
import Hiddenarea from "./Hiddenarea.vue";
import HiddenCity from "./HiddenCity.vue";
import HiddenTown from "./HiddenTown.vue";
export default {
  components: { HiddenTown, HiddenCity, Hiddenarea },
  data() {
    return {
      ShowContent: false,
      buttonValue: "省份",
      town: "",
      cityHidden: true,
      townHidden: false,
      HiddencountryTow: false,
      Hiddentow: false,
      countryTow: "区",
      Hiddencountryarea: false,
      countryTowHidden: false,
      Hiddenarea: false,
      Allbutton: [],
      AllSecondButton: [],
      FristButtonthis:[],
      SecondButtonthis:[],
      ThirdButtonthis:[],
      allheigt: [],
      TownHidden: "",
      areaHidden: "",
      allheigtThree: [],
      allarea: [],
      HiddenareaNew: "",
      FristValue: '',
      SecondValue: "",
      ThireValue: "",
      KeepStyle:[],
      newStyle:[]
    };
  },
  created() {
    const that = this;
    // 接收Frist传递进来的数据
    bus.$on("ShowContent", function (data) {
      that.ShowContent = data;
    });
    // 接收HiddenTown传递进来的数据
    bus.$on("NowHight", function (data, Sceond) {
      var HightChange = document.getElementsByClassName("selector-tab-panels");
      that.allheigt.splice(0, 1, data);
      that.allarea.splice(0, 3, Sceond);
      that.TownHidden = Sceond;
      // 将高度传递给HideSecond
      bus.$emit('FristHightChange',that.allheigt[0])
      setTimeout(() => {
        HightChange[0].style.height = data + "px";
      }, 100);
    });
    // 接收Hiddenarea传递进来的数据
    bus.$on("NowHightThree", function (data, Sceond) {
      var HightChange = document.getElementsByClassName("selector-tab-panels");
      that.allheigtThree.splice(0, 1, data);
      that.areaHidden = Sceond;
      HightChange[0].style.height = 99 + "px";
      that.allarea.splice(1, 2, Sceond);
      // 将高度传递给HideSecond
      bus.$emit('FristHightChange',that.allheigtThree[0])
    });
    // 接收ContextScoend的数据
    bus.$on("keepAreathis", function (data) {
      // 去除data里面的值，然后挨个传递
      if (data.length == 1) {
          that.FristValue = data[0];
      }
      if (data.length == 2) {
        that.FristValue = data[0];
        that.SecondValue = data[1];
      }
      if (data.length == 3) {
        that.FristValue = data[0];
        that.SecondValue = data[1];
        that.ThireValue = data[2];
      }
    });
    bus.$on('NewTarget',function (data) {
      that.newStyle=data
    })
  },
  methods: {
    // 点击之后进行保存选中的数据
    changeStyle() {
      var spanClass = document.getElementById("indicator");
      if (spanClass.classList.contains("indicator")) {
        spanClass.classList.remove("indicator");
        spanClass.classList.add("indicatorNext");
      } else if (spanClass.classList.contains("indicatorNext")) {
        spanClass.classList.remove("indicatorNext");
        spanClass.classList.add("indicator");
      }
    },
    // 启动按钮的点击函数
    downkeyword() {
      const that = this;
      var buttonClass = document.getElementById("appear-done");
      // 使用监听属性
      buttonClass.onclick = function infor(e) {
        // 这里如果点击到ol标签则就会返回ol标签所有的值
        if (e.target.getAttribute("type") != null) {
          // 进行赋值
          if (
            e.target.innerText == "北京" ||
            e.target.innerText == "重庆" ||
            e.target.innerText == "上海" ||
            e.target.innerText == "天津"
          ) {
            that.town = "区";
          } else {
            that.town = "城镇/城市";
          }
          // 保存点击的标签
          that.KeepStyle.splice(0,1,e) 
          bus.$emit('Etarget',that.KeepStyle)
          that.buttonValue = e.target.innerText;
          // 将点击的城市传递给HiddenTown
          bus.$emit("HiddenTown", that.buttonValue);
          //
          var b = that.Allbutton;
          var c =false
          
          that.preservedom(e, b,c);
          //  进行传值，并且展示第二区块
          that.townHidden = true;
         
          if (that.townHidden == true) {
            // 这里得需要让第二个城镇标签加载出来然后才能使用其函数
            that.townChange("two");
          }
          // 点击之后更改样式，从而实现样式的隐藏和显现
          var HiddenCity = document.getElementById("appear-done");
          HiddenCity.classList.remove("appear-done");
          // 给ol标签设置点击穿透然后0.4s之后消除
          buttonClass.style.pointerEvents = "none";
          that.Hiddenarea = false;
          that.countryTowHidden = false;
          setTimeout(() => {
            buttonClass.style.pointerEvents = "";
            // 并且将其隐藏
            that.cityHidden = false;
            that.downkeywordTwo();
            // 点击之后展示第二块内容
            that.HiddencountryTow = true;
            bus.$emit("closeWindon", that.allarea);
          }, 400);
        }
      };
    },
    downkeywordTwo() {
      const that = this;
      var buttonClass = document.getElementById("appear-Second");
      buttonClass.onclick = function infor(e) {
        // 这里如果点击到ol标签则就会返回ol标签所有的值
        if (e.target.getAttribute("type") != null) {
          that.town = e.target.innerText;
          var b = that.AllSecondButton;
          var c =false
          that.preservedom(e, b,c);
          if (
            that.buttonValue == "北京" ||
            that.buttonValue == "重庆" ||
            that.buttonValue == "上海" ||
            that.buttonValue == "天津"
          ) {
            that.Hiddenarea = true;
            // 点击之后传递数据给HideSecond
            bus.$emit("FristButton", that.town);
            // 传递数据给Shoparea
            bus.$emit('ChangeArr',true)
            setTimeout(() => {
              that.townChange("two");
            }, 200);
            // 点击之后调用函数使得大盒子隐藏
            bus.$emit("HiddenBox", that.buttonValue, that.allheigt);
          }
          that.KeepStyle.splice(1,1,e) 
           bus.$emit('Etarget',that.KeepStyle)
          if (that.HiddencountryTow == true && that.Hiddenarea == false) {
            // 这里得需要让第二个城镇标签加载出来然后才能使用其函数
            that.countryTowHidden = true;
            that.townChange("three");
          }
          //展示第三区块的内容
          // 点击之后更改样式，从而实现样式的隐藏和显现
          var HiddenCity = document.getElementById("appear-Second");
          HiddenCity.classList.remove("appear-Second");
          // 给ol标签设置点击穿透然后0.4s之后消除
          buttonClass.style.pointerEvents = "none";
          setTimeout(() => {
            buttonClass.style.pointerEvents = "";
            // 并且将第二块隐藏,并展示第三块区域
            that.HiddencountryTow = false;
            that.downkeywordTwoThere();
            if (that.Hiddenarea == false) {
              that.countryTowHidden = true;
            }
            bus.$emit("closeWindon", that.allarea);
          }, 400);
          // 将点击获取到的数据传递给Hiddenarea
          bus.$emit("HiddenCity", that.town);
        }
      };
    },
    // 设置第三个按钮
    downkeywordTwoThere() {
      const that = this;
      var Buttonthree = document.getElementById("appear-Three");
      Buttonthree.onclick = function infor(e) {
        if (e.target.getAttribute("type") != null) {
          //  点击之后传递参数给HideSecond
          bus.$emit("ThereButton", e.target.innerText);
          bus.$emit("HiddenBox", that.areaHidden);
          that.allheigtarea("three");
          that.HiddenareaNew = e.target.innerText.replace("\n", "");
          that.allarea.splice(2, 1, that.HiddenareaNew.replace("\n", ""));
          that.countryTow= that.allarea[2]
          that.KeepStyle.splice(2,1,e) 
           bus.$emit('Etarget',that.KeepStyle)
          setTimeout(() => {
            // 给Frist，和HideSecond传递参数
            bus.$emit("closeOutline", that.allarea);
            bus.$emit('ChangeArr',true)
          }, 100);
        }
      };
    },
    // 保存上次点击的dom元素
    preservedom(e, b,c) {
      //给点击的城市添加样式
      // 将上次点击的dom对象保存再一个数组里面
      if (c==true) {
        e.target.style.fontWeight = "600";
      if (b.length > 0) {
        b[0].style.cssText = "";
      }
      b.push(e.target);
      // 保存俩次数据相同样式不变
      if (b[0] == b[1]) {
        e.target.style.fontWeight = "600";
      }
      if (b.length > 1) {
        // 时刻更新数组，确保这个数组里面唯一的元素是上次点击的dom元素
        b.shift();
      }
      }else{
      
      e.target.style.fontWeight = "600";
      if (b.length > 0) {
        b[0].style.cssText = "";
      }
      b.push(e.target);
      // 保存俩次数据相同样式不变
      if (b[0] == b[1]) {
        e.target.style.fontWeight = "600";
      }
      if (b.length > 1) {
        // 时刻更新数组，确保这个数组里面唯一的元素是上次点击的dom元素
        b.shift();
      }
      }
    },
    allheigtarea(value) {
      var previousHight = document.getElementsByClassName(
        "selector-tab-panels"
      );
      if (value == "two") {
        previousHight[0].style.height = this.allheigt[0] + "px";
        // 向Frist传递数据
        bus.$emit("previousHightTwo", this.allheigt[0]);
      }
      setTimeout(() => {
        if (value == "three") {
          previousHight[0].style.height = this.allheigtThree[0] + "px";
          bus.$emit("previousHightTwo", this.allheigtThree[0]);
        }
      }, 100);
    },
      // 判断传递进来的数据是几个位置
    // 点击之后返回原来样式,来回切换样式
    townChange(value) {
      const that = this;
      var buttontwo = document.getElementById("appear-Second");
      var ButtonFrist = document.getElementById("selector-tab");
      var ButtonSceond = document.getElementById("selector-tabTwo");
      var ButtonThere = document.getElementById("selector-tabThrid");
      var HiddenCity = document.getElementById("appear-done");
      var buttonThree = document.getElementById("appear-Three");
      var previousHight = document.getElementsByClassName(
        "selector-tab-panels"
      );
      if (value == "one") {
        if (ButtonFrist.classList.contains("selector-tabChange")) {
          ButtonFrist.classList.remove("selector-tabChange");
          ButtonFrist.classList.add("selector-tab");
        }
        if (ButtonSceond.classList.contains("selector-tabTwo")) {
          ButtonSceond.classList.remove("selector-tabTwo");
          ButtonSceond.classList.add("selector-tabTwoChange");
        }
        if (ButtonThere.classList.contains("selector-tabThrid")) {
          ButtonThere.classList.remove("selector-tabThrid");
          ButtonThere.classList.add("selector-tabThridChange");
        }
        setTimeout(() => {
          this.cityHidden = true;
          this.HiddencountryTow = false;
          this.Hiddencountryarea = false;
        }, 400);
        HiddenCity.classList.add("appear-done");
        //  点击之后展示第一区块的内容,隐藏其他区域的展示
        buttontwo.classList.remove("appear-Second");
        buttonThree.classList.remove("appear-Three");
        // 点击之后向Frist传递数据从新展示其原来的高度
        bus.$emit("previousHight", 582);
        previousHight[0].style.height = 496 + "px";
      }
      if (value == "two") {
        if (ButtonSceond.classList.contains("selector-tabTwoChange")) {
          ButtonSceond.classList.remove("selector-tabTwoChange");
          ButtonSceond.classList.add("selector-tabTwo");
        }
        if (ButtonFrist.classList.contains("selector-tab")) {
          ButtonFrist.classList.remove("selector-tab");
          ButtonFrist.classList.add("selector-tabChange");
        }
        if (ButtonThere.classList.contains("selector-tabThrid")) {
          ButtonThere.classList.remove("selector-tabThrid");
          ButtonThere.classList.add("selector-tabThridChange");
          
        }
        // 点击的时候同样实现样式隐藏

        HiddenCity.classList.remove("appear-done");
        buttontwo.classList.add("appear-Second");
        buttonThree.classList.remove("appear-Three");
        setTimeout(() => {
          this.cityHidden = false;
          this.HiddencountryTow = true;
          this.Hiddencountryarea = false;
        }, 400);
        this.allheigtarea("two");
      }
      if (value == "three") {
        //  清除第一个或第二个样式，展示第三个样式
        if (ButtonSceond.classList.contains("selector-tabTwo")) {
          ButtonSceond.classList.remove("selector-tabTwo");
          ButtonSceond.classList.add("selector-tabTwoChange");
        }
        if (ButtonFrist.classList.contains("selector-tab")) {
          ButtonFrist.classList.remove("selector-tab");
          ButtonFrist.classList.add("selector-tabChange");
        }
        if (ButtonThere.classList.contains("selector-tabThridChange")) {
          ButtonThere.classList.remove("selector-tabThridChange");
          ButtonThere.classList.add("selector-tabThrid");
        }
        setTimeout(() => {
          this.cityHidden = false;
          this.HiddencountryTow = false;
          this.Hiddencountryarea = true;
        }, 400);
        HiddenCity.classList.remove("appear-done");
        buttontwo.classList.remove("appear-Second");
        buttonThree.classList.add("appear-Three");
        // 点击第三块区域高度变化
        this.allheigtarea("three");
      }
    },
    FristFunction(){
      const that = this;
      var buttonClass = document.getElementById("appear-done");
        // 传递给Frist让其展示盒子
        // bus.$emit('FristValueThis','thisNow')
        if (this.FristValue != null) {
          // 进行赋值
          if (
            this.FristValue == "北京" ||
            this.FristValue == "重庆" ||
            this.FristValue == "上海" ||
            this.FristValue == "天津"
          ) {
            this.town = "区";

          } else {
            this.town = "城镇/城市";
          }
         var e=that.newStyle[0] 
          var b = that.FristButtonthis;
          var c =true
          that.preservedom(e, b,c);
          //  进行传值，并且展示第二区块
          this.townHidden = true;
          that.buttonValue =this.FristValue  ;
          if (that.townHidden == true) {
            // 这里得需要让第二个城镇标签加载出来然后才能使用其函数
            that.townChange("two");
          }
          bus.$emit("HiddenTown", this.FristValue);
          // 点击之后更改样式，从而实现样式的隐藏和显现
          var HiddenCity = document.getElementById("appear-done");
          HiddenCity.classList.remove("appear-done");
          // 给ol标签设置点击穿透然后0.4s之后消除
          buttonClass.style.pointerEvents = "none";
          that.Hiddenarea = false;
          that.countryTowHidden = false;
          setTimeout(() => {
            buttonClass.style.pointerEvents = "";
            // 并且将其隐藏
            that.cityHidden = false;
            that.downkeywordTwo();
            // 点击之后展示第二块内容
            that.HiddencountryTow = true;
            bus.$emit("closeWindon", that.allarea);
          }, 100);
          bus.$emit("HiddenBox", this.FristValue,that.allheigt,true);
        }
      
    },
    SecondFunction(){
      const that =this
      var buttonClass = document.getElementById("appear-Second");
      if (that.SecondValue != null) {
          if (
            that.buttonValue == "北京" ||
            that.buttonValue == "重庆" ||
            that.buttonValue == "上海" ||
            that.buttonValue == "天津"
          ) {
            that.Hiddenarea = true;
            // 点击之后传递数据给HideSecond
            bus.$emit("FristButton", that.SecondValue);
            setTimeout(() => {
              that.townChange("two");
            }, 200);
            // 点击之后调用函数使得大盒子隐藏
          
          }
            bus.$emit("HiddenBox", that.buttonValue, that.allheigt,true);
          that.town=that.SecondValue
          var b = that.SecondButtonthis;
          var e =that.newStyle[1]
          var c =true
          that.preservedom(e, b,c);
          if (that.HiddencountryTow == true && that.Hiddenarea == false) {
            // 这里得需要让第二个城镇标签加载出来然后才能使用其函数
            that.countryTowHidden = true;
            that.townChange("three");
          }
          //展示第三区块的内容
          // 点击之后更改样式，从而实现样式的隐藏和显现
          var HiddenCity = document.getElementById("appear-Second");
          HiddenCity.classList.remove("appear-Second");
          // 给ol标签设置点击穿透然后0.4s之后消除
          buttonClass.style.pointerEvents = "none";
          setTimeout(() => {
            buttonClass.style.pointerEvents = "";
            // 并且将第二块隐藏,并展示第三块区域
            that.HiddencountryTow = false;
            that.downkeywordTwoThere();
            if (that.Hiddenarea == false) {
              that.countryTowHidden = true;
            }
            bus.$emit("closeWindon", that.allarea);
          }, 400);
          // 将点击获取到的数据传递给Hiddenarea
          bus.$emit("HiddenCity", that.SecondValue);
        }
    },
    ThirdFunction(){
      const that=this
      if (that.ThireValue != null) {
          //  点击之后传递参数给HideSecond
          bus.$emit("ThereButton", that.ThireValue);
          bus.$emit("HiddenBox", that.areaHidden);
          that.allheigtarea("three");
          that.HiddenareaNew = that.ThireValue.replace("\n", "");
          that.allarea.splice(2, 1, that.HiddenareaNew.replace("\n", ""));
          bus.$emit("HiddenBox", that.areaHidden, that.allheigt,true);
          that.countryTow=that.ThireValue
          var b = that.ThirdButtonthis;
          var e =that.newStyle[2]
          var c =true
          that.preservedom(e, b,c);
          setTimeout(() => {
            // 给Frist，和HideSecond传递参数
            bus.$emit("closeOutline", that.allarea);
          }, 100);
        }
    }
  },
  watch: {
    // 监听值的变化，然后动态的改变样式
    townHidden(current, prve) {
      if (current == true) {
        var ButtonFrist = document.getElementById("selector-tab");
        if (ButtonFrist.classList.contains("selector-tab")) {
          ButtonFrist.classList.remove("selector-tab");
          ButtonFrist.classList.add("selector-tabChange");
        }
      }
    },
    FristValue:{
    handler(current, prve) {
      setTimeout(() => {
       this.FristFunction() 
      }, 200);
      },
      deep:true
    },
    SecondValue:{
    handler(current, prve) {
      setTimeout(() => {
        this.SecondFunction()
      }, 350);
      
      },
      deep:true
    },
    ThireValue:{
    handler(current, prve) {
      setTimeout(() => {
        this.ThirdFunction()
      }, 400);
      console.log('0000');
      },
      deep:true
    },

  },
  mounted() {
    this.downkeyword();
  },
};
</script>

<style lang="less" scoped>
.transition-done {
  padding-top: 10px;
  .form-checkbox {
    height: 35.2px;
    width: 100%;
    input {
      position: absolute;
      top: 0.17647rem;
      left: 0;
      opacity: 0;
      width: 0.94118rem;
      height: 0.94118rem;
    }
    .form-label {
      position: relative;
      padding-left: 26px;
      width: 200px;
      height: 47px;
      font-size: 14px;
      font-weight: 400;
      color: #6b6b6c;
      .indicator {
        position: absolute;
        top: 0.11765rem;
        display: inline-block;
        cursor: pointer;
        width: 0.82353rem;
        height: 0.82353rem;
        border-radius: 0.17647rem;
        border-width: 1px;
        border-style: solid;
        left: 0;
      }
      .indicatorNext {
        position: absolute;
        top: 0.11765rem;
        display: inline-block;
        cursor: pointer;
        width: 0.82353rem;
        height: 0.82353rem;
        border-radius: 0.17647rem;
        border-width: 1px;
        border-style: solid;
        left: 0;
        color: #fff;
        border-color: #0071e3;
        background-color: #0071e3;
      }
      .indicatorNext::after {
        content: "✔";
        position: absolute;
        top: -4.5px;
        left: 0.5px;
        font-size: 14px;
        line-height: 1.55556;
        font-weight: 400;
        letter-spacing: 0.009em;
        font-family: SF Pro Icons;
      }
    }
  }
  .selector {
    width: 100%;
    height: 100%-35.2px;
    .selector-tabs {
      width: 100%;
      height: 100%;
      .selector-tablist {
        border-bottom: 1px solid #d2d2d7;
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        li {
          padding-left: 60px;
          display: inline-block;
          list-style: none;
          outline: none;
          .selector-tab {
            border: none;
            font-weight: 600;
            color: #1d1d1f;
            pointer-events: none;
            text-decoration: none;
            cursor: default;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
          }
          .selector-tabTwo {
            border: none;
            font-weight: 600;
            color: #1d1d1f;
            text-decoration: none;
            cursor: default;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
            cursor: pointer;
            pointer-events: none;
          }
          .selector-tabTwoChange {
            border: none;
            font-weight: 400;
            color: #277dd4;
            text-decoration: none;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
            cursor: pointer;
          }
          .selector-tabThrid {
            border: none;
            font-weight: 600;
            color: #1d1d1f;
            text-decoration: none;
            cursor: default;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
            cursor: pointer;
            pointer-events: none;
          }
          .selector-tabThridChange {
            border: none;
            font-weight: 400;
            color: #277dd4;
            text-decoration: none;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
            cursor: pointer;
          }
          .selector-tabTwo::after {
            left: 0;
            position: absolute;
            bottom: -12px;
            width: 100%;
            border-bottom: 1px solid #1d1d1f;
            content: "";
          }
          .selector-tabThrid::after {
            left: 0;
            position: absolute;
            bottom: -12px;
            width: 100%;
            border-bottom: 1px solid #1d1d1f;
            content: "";
          }
          .selector-tabChange {
            border: none;
            font-weight: 400;
            color: #277dd4;
            text-decoration: none;
            z-index: 10;
            position: relative;
            margin: 9px 0 11px;
            background-color: #fff;
            cursor: pointer;
          }
          .selector-tab::after {
            left: 0;
            position: absolute;
            bottom: -12px;
            width: 100%;
            border-bottom: 1px solid #1d1d1f;
            content: "";
          }
        }
        li:nth-child(1) {
          padding-left: 0 !important;
        }
      }
      [data-core-tabs-panels] {
        transition-property: height;
        transition-timing-function: ease-in-out;
        transition-duration: 0.4s;
        overflow: hidden;
      }
      .selector-tab-panels {
        width: 656px;
        height: 496px;
        [data-core-fade-transition-wrapper] {
          position: static;
          opacity: 0;
          transition-property: opacity;
          transition-timing-function: ease-in-out;
          transition-duration: 0.4s;
        }
        [data-core-fade-transition-wrapperTwo] {
          position: static;
          opacity: 0;
          transition-property: opacity;
          transition-timing-function: ease-in-out;
          transition-duration: 0.4s;
        }
        .appear-done {
          width: 100%;
          opacity: 1;
        }
        .appear-Second {
          width: 100%;
          opacity: 1;
        }
        .appear-Three {
          width: 100%;
          opacity: 1;
        }
        ol {
          display: flex;
          flex-flow: column wrap;
          margin: 0;
          padding: 0;
          li {
            list-style: none;
            margin: 18px 10px 18px 0;
            text-align: left;
            button {
              border: none;
              background-color: #fff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>